<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>EShopManager</title>
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="stylesheet" type="text/css"
          href="${pageContext.request.contextPath }/static/lib/bootstrap/css/bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/stylesheets/theme.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath }/static/lib/font-awesome/css/font-awesome.css"/>
    <script src="${pageContext.request.contextPath }/static/lib/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/static/lib/vue.js" type="text/javascript"></script>


    <!-- 日期选择器 -->
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"/>
    <script src="${pageContext.request.contextPath}/code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"/>
    <!------------>

    <!-- Demo page code -->

    <style type="text/css">
        #line-chart {
            height: 300px;
            width: 800px;
            margin: 0px auto;
            margin-top: 1em;
        }

        .brand {
            font-family: georgia, serif;
        }

        .brand .first {
            color: #ccc;
            font-style: italic;
        }

        .brand .second {
            color: #fff;
            font-weight: bold;
        }
    </style>

    <script type="text/javascript">
        // /**日期选择器**/
        // $(function() {
        //   $( "#datepicker" ).datepicker();
        // });

        /**全选、全不选**/
        // $(function () {
        //     $("#all_ck").change(function () {
        //         if ($(this).is(':checked')) {//全选
        //             $("[name=ck]:checkbox").each(function () {
        //                 this.checked = true;
        //                 //$(this).attr("checked",true);
        //             });
        //         } else {//全不选
        //             $("[name=ck]:checkbox").each(function () {
        //                 this.checked = false;
        //                 //$(this).attr("checked",false);
        //             });
        //         }
        //
        //     });
        //
        // });

    </script>
</head>
<body>

<c:import url="top.jsp"></c:import>
<c:import url="left.jsp"></c:import>

<div class="content">
    <div class="header">
        <h1 class="page-title">订单管理</h1>
    </div>

    <ul class="breadcrumb">
        <li><a href="ordermanager.jsp">订单管理</a> <span class="divider">/</span></li>
        <li class="active">订单列表</li>
    </ul>

    <div class="container-fluid">

        <div class="row-fluid">

            <div class="block">
                <a href="#page-filter" class="block-heading" data-toggle="collapse">筛选</a>
                <div id="page-filter" class="block-body collapse in">
                    <div class="search-well">
                        <form class="form-inline" role="search"
                              action="#" method="post">

                            <input type="text" class="form-contro"
                                   placeholder="发布人" name="person_name"/>
                            <input type="text" class="form-control" placeholder="收货人"
                                   name="stu_name"/>
                            <input type="text" class="form-contr"
                                   placeholder="请选择下单日期" id="datepicker" name="date"/>
                            <select class="good" name="stu_sex">
                                <option value="" selected="selected">--请选择状态--</option>
                                <option value="3">发货中</option>
                                <option value="4">已收货</option>
                            </select>
                            <button type="button" class="btn btn-default" @click="select()"><i class="icon-search"></i> 查询</button>

                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="row-fluid">

<%--            <span>共有 <b>{{OrderArrayleat}}</b> 条记录</span>--%>

            <div class="well">



                <table class="table">
                    <thead>
                    <tr id="theTableTitle">
                        <th>
<%--                            <input type="checkbox" id="all_ck"/>--%>
                            订单号
                        </th>
                        <th>总金额</th>
                        <th>发布人</th>
                        <th>商品信息</th>
                        <th>下单时间</th>
                        <th>收货人</th>
                        <th>收货地址</th>
                        <th>订单状态</th>
                        <th>操作</th>
                    </tr>
                    </thead>

                    <tbody>

<%--                    <c:forEach items="${requestScope.indent}" var="ind">--%>
<%--                        <tr>--%>
<%--                            <td>--%>
<%--                                ${ind.goods_id}--%>
<%--                            </td>--%>
<%--                            <td>${ind.goods_old_price}</td>--%>
<%--                            <td>${ind.publisher} </td>--%>
<%--                            <td>${ind.goods_name} </td>--%>
<%--                            <td>--%>
<%--                                ${ind.buy_time}--%>
<%--                            </td>--%>
<%--                            <td>--%>
<%--                                ${ind.addressee}--%>
<%--                            </td>--%>
<%--                            <td>${ind.add_name}</td>--%>
<%--                            <td>--%>
<%--                                <c:choose>--%>
<%--                                    <c:when test="${ind.goods_state == 2}">--%>
<%--                                        已付款--%>
<%--                                    </c:when>--%>
<%--                                    <c:when test="${ind.goods_state == 3}">--%>
<%--                                        发货中--%>
<%--                                    </c:when>--%>

<%--                                    <c:otherwise>--%>
<%--                                        已收货--%>
<%--                                    </c:otherwise>--%>
<%--                                </c:choose>--%>
<%--                            </td>--%>
<%--                            <td>--%>
<%--                                <a href="javascript:deleteClick(${ind.goods_id})" title="删除"><i class="icon-remove"></i></a>--%>
<%--                            </td>--%>
<%--                        </tr>--%>

<%--                    </c:forEach>--%>



<%--                    <c:forEach items="${requestScope.indent}" var="info">--%>
                        <tr v-for="(info,i) in OrderArray" :key="i">
                        <td>
<%--                            <input type="checkbox" id="ck" name="ck" value="1"/>--%>
                            {{info.goods_id}}
                        </td>
                        <td>{{info.goods_old_price}}</td>
                        <td>{{info.publisher}} </td>
                        <td>{{info.goods_name}} </td>
                        <td>
                                {{info.buy_time}}
                        </td>
                        <td>
                                {{info.addressee}}
                        </td>
                        <td>{{info.add_name}}</td>
                        <td>

                                {{info.goods_state==3?"发货中":"已收货"}}
                        </td>
<%--                        <td>{{oder.publisher}} </td>--%>
<%--                        <td>{{oder.goods_name}} </td>--%>
<%--                        <td>--%>
<%--                            {{oder.buy_time}}--%>
<%--                        </td>--%>
<%--                        <td>--%>
<%--                            {{oder.addressee}}--%>
<%--                        </td>--%>
<%--                        <td>{{oder.add_name}}</td>--%>
<%--                        <td>--%>

<%--                            {{oder.goods_state}}--%>
<%--                        </td>--%>
                        <td>
                            <a @click="deleteClick(info.goods_id)" title="删除"><i class="icon-remove"></i></a>
                        </td>
                    </tr>


                    </tbody>

                </table>
            </div>
            <div class="pagination pagination myul">
                <ul>
                    <li class='disabled'><a href="#">&laquo;首页</a></li>
                    <li class='disabled'><a href="#">上一页</a></li>
                    <li><a href="#">1</a></li>
                    <li class='active'><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">下一页</a></li>
                    <li><a href="#">尾页&raquo;</a></li>
                </ul>
            </div>


        </div>


        <c:import url="footer.jsp"></c:import>
    </div>


</div>

<script>

    var boy = new Vue({
        el: ".content",
        data: {
            OrderArray: [],
            OrderArrayleat:{}

        },
        methods: {
            //查询订单数据,映射页面
            selectorder() {
                $.post("${pageContext.request.contextPath }/goods/indent1.do", function (man) {
                    if (man.code == 200) {
                        boy.OrderArray = man.data
                        boy.OrderArrayleat=boy.OrderArray.length
                        console.log(boy.OrderArray)
                        for (var i=0;i<boy.OrderArray.length;i++){
                            boy.OrderArray[i].buy_time=boy.formatDate(boy.OrderArray[i].buy_time)
                            console.log(boy.formatDate(boy.OrderArray[i].buy_time))
                        }
                    }
                })

            },
            formatDate(date) {
                var date = new Date(date);
                var YY = date.getFullYear() + '-';
                var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
                var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
                return YY + MM + DD;
            },
            select(){
                console.log($(".form-control").val())
                console.log($(".form-contro").val())
                console.log($(".form-contr").val())
                console.log($(".good").find("option:selected").val())

                //发布人
                var addressee =$(".form-control").val();
                //收件人
                var publisher =$(".form-contro").val();
                //订单时间
                var buy_time =$(".form-contr").val();
                //获取订单id
                var goods_id = $(".good").find("option:selected").val();


                data={
                    "publisher":publisher,
                    "buy_time":buy_time,
                    "addressee":addressee,
                    "goods_id":goods_id
                }

                $.post("${pageContext.request.contextPath }/goods/classification.do",data, function (man) {
                    boy.OrderArray = man.data
                    for (var i=0;i<boy.OrderArray.length;i++){
                        boy.OrderArray[i].buy_time=boy.formatDate(boy.OrderArray[i].buy_time)
                        console.log(boy.formatDate(boy.OrderArray[i].buy_time))
                    }
                })

                // ($(".form-control").val( ))
                // var goods = ;
            },
            deleteClick(id){
                data={
                    goods_id:id
                }
                $.post("${pageContext.request.contextPath }/goods/delectGoods.do",data, function (man) {

                    if(man.code=200){
                        alert(man.data);
                        location.reload();
                    }else {
                        alert(man.data);
                    }

                })
            }

        },
        created() {
            this.selectorder()
        }

    })


</script>


<script src="${pageContext.request.contextPath }/static/lib/bootstrap/js/bootstrap.js"></script>
<script type="text/javascript">
    $("[rel=tooltip]").tooltip();
    $(function () {
        $('.demo-cancel-click').click(function () {
            return false;
        });
    });
    //删除该订单
    function deleteClick(id){
            data={
                goods_id:id
            }
            $.post("${pageContext.request.contextPath }/goods/delectGoods.do",data, function (man) {

                if(man.code=200){
                    alert(man.data);
                    location.reload();
                }else {
                    alert(man.data);
                }

            })
    }
</script>

</body>
</html>